<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星辰诞愿 - 生日注册</title>
    <style>
        /* Birthday Theme Styles */
        body {
            margin: 0;
            padding: 0;
            font-family: 'Comic Sans MS', cursive, sans-serif;
            min-height: 100vh;
            background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);;
            background-size: 100%;
            background-blend-mode: overlay;
        }
        .nav {
            display: flex;
            align-items: center;
            padding: 15px 30px;
            background: rgba(255, 255, 255, 0.9);
            box-shadow: 0 2px 15px rgba(210, 51, 105, 0.2);
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            border-bottom: 3px solid #ff6b88;
        }
        .nav img {
            height: 50px;
            width: 50px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 15px;
            border: 2px solid #ff8e53;
        }
        .blog-title {
            font-size: 24px;
            font-weight: bold;
            color: #d23369;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        }
        .space {
            flex-grow: 1;
        }
        .container-login {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            padding-top: 80px;
            box-sizing: border-box;
        }
        .login-dialog {
            background-color: rgba(255, 255, 255, 0.95);
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 10px 25px rgba(210, 51, 105, 0.2);
            width: 380px;
            border: 2px dashed #ff6b88;
            position: relative;
        }
        .login-dialog:before {
            content: "🎂";
            position: absolute;
            font-size: 30px;
            top: -15px;
            left: -15px;
        }
        .login-dialog:after {
            content: "🎉";
            position: absolute;
            font-size: 30px;
            bottom: -15px;
            right: -15px;
        }
        .login-dialog h3 {
            text-align: center;
            margin-bottom: 25px;
            color: #d23369;
            font-size: 28px;
            font-weight: bold;
        }
        .row {
            margin-bottom: 20px;
        }
        .row span {
            display: block;
            margin-bottom: 8px;
            color: #d23369;
            font-weight: bold;
        }
        .row input {
            width: 100%;
            padding: 12px;
            border: 2px solid #ffb8c6;
            border-radius: 8px;
            box-sizing: border-box;
            font-family: inherit;
            background-color: #fff9fa;
        }
        .row input:focus {
            outline: none;
            border-color: #d23369;
        }
        button {
            width: 100%;
            padding: 12px;
            background: linear-gradient(to right, #ff6b88, #ff8e53);
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
            font-family: inherit;
            margin-top: 10px;
            box-shadow: 0 4px 8px rgba(210, 51, 105, 0.2);
            transition: all 0.3s;
        }
        button:hover {
            background: linear-gradient(to right, #ff8e53, #ff6b88);
            transform: translateY(-2px);
        }
        #register {
            background: linear-gradient(to right, #a18cd1, #fbc2eb);
        }
        #register:hover {
            background: linear-gradient(to right, #fbc2eb, #a18cd1);
        }
        .birthday-message {
            text-align: center;
            color: #d23369;
            font-weight: bold;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="nav">
        <img src="pic/cat.jpg" alt="生日小猫">
        <span class="blog-title">星辰诞愿 · 生日注册</span>
        <div class="space"></div>
    </div>

    <div class="container-login">
        <div class="login-dialog">
            <h3>生日注册</h3>
            <div class="row">
                <span>🎈 用户名</span>
                <label for="userName"></label>
                <input type="text" name="userName" id="userName" placeholder="输入用户名">
            </div>
            <div class="row">
                <span>🔑 密码</span>
                <label for="password"></label>
                <input type="password" name="password" id="password" placeholder="设置密码">
            </div>
            <div class="row">
                <button id="register" onclick="register()">注册 🎁</button>
            </div>
            <div class="row">
                <button onclick="location.href='login.html'" style="background: linear-gradient(to right, #4facfe, #00f2fe);">
                    返回登录 🎀
                </button>
            </div>
            <div class="birthday-message">
                注册加入我们的生日派对！
            </div>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script>
        function register() {
            $.ajax({
                type: "post",
                url: "/user/register",
                data: {
                    userName: $("#userName").val(),
                    password: $("#password").val(),
                    birthday:$("#birthday").val()
                },
                success: function(result) {
                    if (result.code === "SUCCESS" && result.data === "注册成功") {
                        alert("🎉 注册成功！欢迎加入生日派对！");
                        location.href = "login.html";
                    } else {
                        alert(result.errorMessage)
                    }
                },
                error: function(error) {
                    if (error != null && error.status === 401) {
                        location.href = "login.html";
                    }
                }
            })
        }
    </script>
</body>

</html>